<div class="row mb-3">
  <div class="col-6">
    <h3 class="primary-text m-0">{{ 'menu.label_status' | translate }}</h3>
  </div>
  @if (consoleStatus === 'up' && isAdmin) {
  <div class="col-6 text-end">
    <button
      type="button"
      class="btn btn-elegant my-0 me-0"
      [hidden]="!options.draggable.enabled && !page.showWidgetConfigure"
      (click)="addWidget()"
      container="body"
      placement="bottom"
      [openDelay]="150"
      triggers="hover"
      [ngbTooltip]="'status.widget.show_hide' | translate"
      [attr.aria-label]="'status.widget.show_hide' | translate"
    >
      <i class="fas fa-eye-low-vision"></i>
    </button>
    <div class="btn-group d-none d-sm-inline-block" role="group">
      <button
        type="button"
        class="btn btn-elegant my-0 ms-2"
        [disabled]="options.draggable.enabled"
        (click)="unlockLayout()"
        container="body"
        placement="bottom"
        [openDelay]="150"
        triggers="hover"
        [ngbTooltip]="'form.button_unlock' | translate"
        [attr.aria-label]="'form.button_unlock' | translate"
      >
        <i class="fas fa-unlock"></i>
      </button>
      <button
        type="button"
        class="btn btn-elegant my-0 me-0"
        [disabled]="!options.draggable.enabled"
        (click)="lockLayout()"
        container="body"
        placement="bottom"
        [openDelay]="150"
        triggers="hover"
        [ngbTooltip]="'form.button_lock' | translate"
        [attr.aria-label]="'form.button_lock' | translate"
      >
        <i class="fas fa-lock"></i>
      </button>
    </div>
  </div>
  }
</div>
<div class="status-container d-flex flex-column mt-0">
  @if (consoleStatus === 'down') {
  <app-spinner />
  }
  <div class="row flex-column flex-grow-1">
    @if (dashboard.length) {
    <gridster [options]="options" class="flex-grow-1 no-scrollbars py-0" [hidden]="consoleStatus === 'down'">
      @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
      <gridster-item class="widget-item" [item]="item" [id]="item.component">
        <div class="gridster-item-content">
          @if (options.draggable.enabled || page.showWidgetConfigure) {
          <div class="widget-control-button" (click)="manageWidget(item)">
            <i class="fas fa-cog"></i>
          </div>
          }
        </div>
        <app-widgets [widget]="item" class="d-flex h-100 w-100" />
      </gridster-item>
      } }
    </gridster>
    }
  </div>
  <div class="row mb-auto">
    <div class="col-md-12 text-center px-4 pt-1 pt-lg-2 pb-3 pb-lg-2 grey-text">
      <!-- The below copyright notice shall be included and displayed on all copies or substantial portions of this software. -->
      <small>
        &copy; {{ currentYear }} &middot;
        <a class="grey-text" target="_blank" rel="noopener noreferrer" href="https://github.com/homebridge/homebridge">
          Homebridge
        </a>
        &middot;
        <a
          class="grey-text"
          target="_blank"
          rel="noopener noreferrer"
          href="https://github.com/homebridge/homebridge-config-ui-x"
        >
          Homebridge UI
        </a>
        &middot;
        <a class="grey-text" href="javascript: void(0);" (click)="openCreditsModal()"> <i class="fas fa-heart"></i></a>
      </small>
      <!-- The above copyright notice shall be included and displayed on all copies or substantial portions of this software. -->
    </div>
  </div>
</div>
